<template>
  <div class="kxz-callLog__wrapper">
    <el-tabs v-model="tabs.value" type="border-card" @tab-click="handleChangeTab">
      <el-tab-pane :key="item.index" v-for="item in tabs.opts" :label="item.label" :name="item.index">
      </el-tab-pane>
    </el-tabs>
    <log-relative-msg @onOpen="handleOpen"></log-relative-msg>
    <div :class="$style.bottom">
      <h2 :class="$style.h2">服务小计</h2>
      <log-service-form
        :Pque1="opts.que1"
        :Pque2="opts.que2"
        :Pselque1="selOpt.que1"
        :Pselque2="selOpt.que2"
        @onOpen="handleOpen"
        @onSelQue1="handleChangeQue1"
        @onSelQue2="handleChangeQue2"
      ></log-service-form>
      <div :class="$style.tableWrapper">
        <p class="selType">
          <el-button :class="tableType === 'history' ? 'active' :''" @click="tableType = 'history'">历史记录</el-button>
          <el-button :class="tableType === 'back' ? 'active' :''" @click="tableType = 'back'">回访计划</el-button>
        </p>
        <log-history-table v-if="tableType === 'history'" @onCheckOpen="handleCheckContent"></log-history-table>
        <div class="backProject" v-else>
          <p class="backTop">
            <span class="bd" :class="projType === 'add' ? 'active' : ''" @click="projType = 'add'">新增回访计划</span>
            <span :class="projType === 'history' ? 'active' : ''" @click="projType = 'history'">历史计划</span>
          </p>
          <log-back-form v-if="projType === 'add'"></log-back-form>
          <log-back-table v-else @onCheckOpen="handleCheckContent"></log-back-table>
        </div>
      </div>
    </div>
    <el-dialog
      :title="dialogType | fltDialogTitle"
      :visible.sync="dialogSwitch"
      :modal="dialogIsShowModal"
      :top="dialogTop"
      :customClass="`dialog${dialogType}`"
      :close-on-click-modal="dialogIsClickModal"
      >
      <dialog1 v-if="dialogType === 1" :Pcontent="checkContent"></dialog1>
      <dialog3 v-else-if="dialogType === 3"></dialog3>
      <dialog4 v-else-if="dialogType === 4"></dialog4>
      <dialog5 v-else-if="dialogType === 5"></dialog5>
      <dialog6 v-else-if="dialogType === 6"
        :Pque1="opts.que1"
        :Pque2="opts.que2"
        :Pselque1="selOpt.que1"
        :Pselque2="selOpt.que2"
        @onSelQue1="handleChangeQue1"
        @onSelQue2="handleChangeQue2"
      ></dialog6>
      <dialog7 v-else-if="dialogType === 7"></dialog7>
    </el-dialog>
  </div>
</template>

<script>
import LogRelativeMsg from './components/log-msg--relative.vue'
import LogServiceForm from './components/log-form--service.vue'
import LogBackForm from './components/log-form--back.vue'
import LogHistoryTable from './components/log-table--history.vue'
import LogBackTable from './components/log-table--back.vue'
import Dialog1 from './components/dialog1.vue'
import Dialog3 from './components/dialog3.vue'
import Dialog4 from './components/dialog4.vue'
import Dialog5 from './components/dialog5.vue'
import Dialog6 from './components/dialog6.vue'
import Dialog7 from './components/dialog7.vue'

export default {
  name: 'call-detail',
  data() {
    const dialogSwitch = this.$store.getters.dialog.isSwitch
    const {serviceForm} = this.$store.getters.callMsg
    const selQue1 = serviceForm.que1 || ''
    const selQue2 = serviceForm.que2 || 0
    // CALLLIST
    let {data,curIndex} = this.$store.getters.callList
    let opts = []
    data.forEach((item,index) => {
      opts.push({
        label:item.telMsg.dh,
        index:index.toString()
      })
    })
    // curIndex = 0
    // opts = [
    //   {label:'tab1',index:'0',},
    //   {label:'tab2',index:'1',},
    // ]
    return {
      tabs:{
        value:curIndex.toString(),
        opts,
      },
      relPageSize: 10,   // telMsg的投标，红包记录的总条数
      tableType: 'history',
      projType: 'add',
      dialogSwitch,
      dialogType: 1,
      dialogIsShowModal: true,
      dialogIsClickModal: false,
      dialogTop: 400 / 1450 * 100 + '%',
      checkContent: '',
      selOpt:{
        que1: selQue1,
        que2: selQue2,
      },
      opts:{
        que1:[],
        que2:[],
      }
    }
  },
  computed:{
    cuDialogSwitch(){
      return this.$store.getters.dialog.isSwitch
    },
    cuCallMsg(){
      return this.$store.getters.callMsg
    },
    cuCallList(){
      return this.$store.getters.callList
    }
  },
  watch:{
    cuDialogSwitch(){
      const {isSwitch, isSubmitGD} = this.$store.getters.dialog
      this.dialogSwitch = isSwitch
      if(this.dialogType === 6 && !isSwitch){
        const str = isSubmitGD ? '转工单完成' : ''
        this.$store.dispatch('updateHandleStatus', str)
      }
    },
    dialogSwitch(val){
      const {isSwitch, isSubmitGD} = this.$store.getters.dialog
      if(!isSubmitGD){
        this.$store.dispatch('updateDialog', {
          isSwitch: val
        })
      }
    },
    'selOpt.que1'(val){
      const ret = {
        serviceForm:{
          que1:val
        }
      }
      this.getQue2(val)
      this.$store.dispatch('updateCallMsg',ret)
    },
    'selOpt.que2'(val){
      const ret = {
        serviceForm:{
          que2:val
        }
      }
      this.$store.dispatch('updateCallMsg',ret)
    },
    cuCallMsg(callMsg){    // 监听callMsg的变化，当其变化的时候，同步更新callList的内容
      const {data, curIndex} = this.$store.getters.callList
      const {serviceForm} = callMsg
      const selQue1 = serviceForm.que1 || ''
      const selQue2 = serviceForm.que2 || 0
      this.selOpt = {
        que1: selQue1,
        que2: selQue2,
      }
      this.$store.dispatch('updateCallListByIndex',{
        callMsg,
        curIndex
      })
    },
    cuCallList(callList){
      // console.log('calldetail:', callList)
      const {data,curIndex} = callList
      const opts = []
      data.forEach((item,index) => {
        opts.push({
          label:item.telMsg.dh,
          index:index.toString()
        })
      })
      this.tabs.value = curIndex.toString()
      this.tabs.opts = opts
    }
  },
  filters: {
    fltDialogTitle(val) {
      switch (val) {
        case 1:
          return '通话内容'
        case 3:
          return '投标计划'
        case 4:
          return '红包记录'
        case 5:
          return '体验金记录'
        case 7:  // 为了更明确由来，不使用default
          return '现金券记录'
      }
    }
  },
  components: {
    LogRelativeMsg,
    LogServiceForm,
    LogBackForm,
    LogHistoryTable,
    LogBackTable,
    Dialog1,
    Dialog3,
    Dialog4,
    Dialog5,
    Dialog6,
    Dialog7
  },
  mounted(){
    // 请求问题类型
    this.getQue1()

    // 如果selQue1有值则发送请求
    const selQue1 = this.selOpt.que1
    if(selQue1){
      this.getQue2(selQue1)
    }
  },
  methods: {
    handleChangeTab({index}){
      // console.log('changeTab')
      const {data, curIndex} = this.$store.getters.callList
      let selIndex = Number.parseInt(index, 10)
      if( selIndex === curIndex){
        return
      }
      const curCallMsg = data[index]
      this.$store.dispatch('updateCallMsg',curCallMsg)
      this.$store.dispatch('updateCallList', {
        data,
        curIndex:selIndex
      })
    },
    handleOpen(dType) {
      this.$store.dispatch('updateDialog', {
        isSwitch: true
      })
      this.dialogType = dType
    },
    handleCheckContent(checkContent){
      this.checkContent = checkContent
      this.handleOpen(1)
    },
    handleChangeQue1(name){
      this.selOpt.que1 = name
    },
    handleChangeQue2(id){
      if(id === ''){
        id = 0
      }
      this.selOpt.que2 = id
    },
    async getQue1(){
      try{
        const {data} = await this.$get(this,{
          api: 'ajaxapi/loadProblemTypes1.do'
        })
        if(data.state === 0){
          this.opts.que1 = data.content
          return
        }
      }catch(e){
        this.$warn('系统ajaxapi/loadProblemTypes1.do接口报错')
      }
    },
    async getQue2(name){
      try{
        const {data} = await this.$get(this,{
          api: 'ajaxapi/loadProblemTypes2.do',
          data:{
            name
          }
        })
        if(data.state === 0){
          const que2 = this.selOpt.que2
          let flag = true

          this.opts.que2 = data.content
          data.content.forEach(item => {
            if(item.id === que2){
              flag = false
            }
          })
          if(flag){
            this.selOpt.que2 = 0
          }
          return
        }
      }catch(e){
        this.$warn('系统ajaxapi/loadProblemTypes2.do报错')
      }
    },
  }
}
</script>

<style lang="scss" module>
$bdColor: #dddfe6;
.bottom {
  background: #fff;
  margin-top: 20px;
}

.h2 {
  padding: 30px 20px;
  font-weight: normal;
  font-size: 20px;
  color: #444;
  border: 1px solid $bdColor;
  border-bottom: none;
}

.tableWrapper {
  padding: 30px 19px;
  border: 1px solid $bdColor;
  border-top: none;
}
</style>

<style lang="scss" scoped>
$btnDftBgColor: #ecf0f3;
$btnDftColor: #bac2cb;
$btnChgBgColor: #5394fc;
$btnChgColor: #fff;
.selType {
  margin-bottom: 20px;
  .el-button {
    padding: 11px 20px;
    color: $btnDftColor;
    font-size: 18px;
    background: $btnDftBgColor;
    border: none;
    &::first-child {
      margin-right: 20px;
    }
    &:hover {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
    &.active {
      color: $btnChgColor;
      background: $btnChgBgColor;
    }
  }
}

.backTop {
  $bdColor: #dddfe6;
  $color: #7b8897;
  border: 1px solid $bdColor;
  border-bottom: none;
  padding: 20px;
  span {
    position: relative;
    font-size: 18px;
    color: $color;
    padding-right: 12px;
    margin-right: 12px;
    cursor: pointer;
    &.active {
      color: $btnChgBgColor;
    }
  }
  .bd::before {
    content: '';
    position: absolute;
    right: 0;
    top: 2px;
    width: 2px;
    height: 19px;
    background-color: $color;
  }
}
</style>

<style lang="scss">
.kxz-callLog__wrapper {
  $color: #444;
  .el-dialog {
    border-radius: 8px;
    box-shadow: 0 1px 30px rgba(0, 0, 0, .3);
  }
  .el-dialog__title {
    font-weight: normal;
    color: $color;
  }
  .el-dialog__header {
    padding: 30px 30px 0;
  }
  .el-dialog__body {
    padding: 30px 30px 0;
    color: $color;
    font-size: 16px;
  }
  .dialog1 {
    width: 660px;
    padding-bottom: 40px;
  }
  .dialog2 {
    width: 660px;
    padding-bottom: 30px;
  }
  .dialog3 {
    width: 1035px;
    padding-bottom: 30px;
    .el-dialog__body {
      padding-top: 20px;
    }
  }
  .dialog4 {
    width: 1035px;
    padding-bottom: 30px;
    .el-dialog__body {
      padding-top: 20px;
    }
  }
  .dialog5 {
    width: 1035px;
    padding-bottom: 40px;
  }
  .dialog6 {
    width: 450px;
    padding-bottom: 30px;
    .el-textarea__inner {
      height: 100px;
    }
  }
  .dialog7 {
    width: 1035px;
    padding-bottom: 30px;
    .el-dialog__body {
      padding-top: 20px;
    }
  }
}
</style>


